<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{commonJs}">
<head>
    <meta charset="UTF-8">
    <title>旅客入住信息详情</title>
    <link rel="stylesheet" type="text/css" href="/static/css/layui.css">

    <style>
        .table-title-label {
            font-weight: bold;
        }
    </style>

</head>
<body layout:fragment="content">
<div id="from">

    <div style="height: 400px;overflow: auto;padding: 10px;">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col>
                <col width="150">
                <col>
            </colgroup>
            <thead></thead>
            <tbody>
            <tr>
                <td align="center">
                    <label class="table-title-label">姓名</label>
                </td>
                <td>{{residenceInfo.passengerName}}</td>
                <td align="center">
                    <label class="table-title-label">国籍</label>
                </td>
                <td>{{residenceInfo.nationality}}</td>
            </tr>

            <tr>
                <td align="center">
                    <span class="table-title-label">性别</span>
                </td>
                <td>{{residenceInfo.sex == 0 ? "男":"女"}}</td>
                <td align="center">
                    <label class="table-title-label">年龄</label>
                </td>
                <td>{{residenceInfo.age}}</td>
            </tr>
            <tr>
                <td align="center">
                    <span class="table-title-label">联系方式</span>
                </td>
                <td>{{residenceInfo.tel}}</td>
                <td align="center">
                    <span class="table-title-label">职业</span>
                </td>
                <td>{{residenceInfo.occupation}}</td>
            </tr>
            <tr>
                <td align="center">
                    <span class="table-title-label">地址</span>
                </td>
                <td colspan="3">{{residenceInfo.address}}</td>
            </tr>
            <tr>
                <td align="center">
                    <span class="table-title-label">登记时间</span>
                </td>
                <td>{{residenceInfo.createTime}}</td>
                <td align="center">
                    <span class="table-title-label">入住房源</span>
                </td>
                <td>{{ residenceInfo.hotelNo }} - {{ residenceInfo.hotelName }}</td>
            </tr>
            <tr>
                <td align="center">
                    <span class="table-title-label">入住时间</span>
                </td>
                <td>{{ getCheckInTime(residenceInfo.checkInDate,residenceInfo.checkInTime) }}</td>
                <td align="center">
                    <span class="table-title-label">退房时间</span>
                </td>
                <td>{{getCheckOutTime(residenceInfo.checkOutDate,residenceInfo.checkOutTime) }}</td>
            </tr>
            <tr>
                <td align="center">
                    <span class="table-title-label">入住者全员姓名</span>
                </td>
                <td colspan="3">{{residenceInfo.allResidents}}</td>
            </tr>
            <tr>
                <td align="center">
                    <span class="table-title-label">入住者全员护照</span>
                </td>
                <td colspan="3">
                    <el-button round @click="viewPassportFiles()">查看护照图片</el-button>
                </td>
            </tr>
            </tbody>
        </table>

        <div v-if="isShowPassportFiles">
            <div>
                <div v-for="url in passportFileUrlList">
                    <img style="margin-top:10px;margin-bottom: 10px;" width="50%" height="50%" :src="url" alt="">
                </div>
                <!--                    <img width="500" height="300" src="http://localhost:8080/api/file/download/20190720/695a52cfdc784fa8a9799346093c82bd/png" alt="">-->
                <!--                <div>-->
                <!--                    <el-image v-for="url in passportFileUrlList" :key="url" :src="url"></el-image>-->
                <!--                </div>-->
            </div>

        </div>

    </div>

    <el-row style="text-align: center;margin-top:20px;">
        <el-button v-if="residenceInfo.status == 0" type="primary" @click="onSubmit">确认该旅客入住信息</el-button>
        <el-button @click="cancel()">关闭</el-button>
    </el-row>
</div>

<script src="/static/js/DateTimeUtils.js"></script>
<script>

    var vm = new Vue({
        el: '#from',
        data: function () {
            var id = top.vm.getVmId();
            var residenceInfo = ajaxGet("/api/passenger/residence/info/detail", {id: id});
            return {
                residenceInfo: residenceInfo,
                houseSourceInfo: residenceInfo.hotelNo + ' - ' + residenceInfo.hotelName,
                isShowPassportFiles: false,
                passportFileUrlList: []
            };
        },
        methods: {
            onSubmit: function () {
                top.vm.$confirm('是否确认该旅客入住信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info '
                }).then(function () {
                    vm.residenceInfo.status = 1;
                    let res = ajaxPost("/api/passenger/residence/info/save", vm.residenceInfo);
                    if (res == true) {
                        top.vm.$message({type: 'success', message: '操作成功!'});
                        vm.closeParentDialog();
                        top.vm.dialogInfo.vm.refresh();
                    } else {
                        top.vm.$message({type: 'success', message: '操作失败!'});
                    }

                });

            },
            cancel: function () {
                this.closeParentDialog();
            },
            closeParentDialog: function () {
                top.vm.$data.dialogInfo.dialogVisible = false;
            },

            getCheckInTime: function (checkInDate, checkInTime) {
                return DateTimeUtils.getCheckInTime(checkInDate, checkInTime);
            },
            getCheckOutTime: function (checkOutDate, checkOutTime) {
                return DateTimeUtils.getCheckOutTime(checkOutDate, checkOutTime);
            },

            viewPassportFiles: function () {
                let passportFilesString = this.residenceInfo.passportFiles;
                let passportFileUrlListTemp = [];
                if (passportFilesString) {
                    let passportFilesJson = JSON.parse(passportFilesString);
                    if (passportFilesJson) {
                        passportFilesJson.map(function (item, index) {
                            passportFileUrlListTemp.push(item.url);
                        });
                    }
                    this.passportFileUrlList = passportFileUrlListTemp;
                }
                this.isShowPassportFiles = true;
            },

        }
    });
</script>
</body>
</html>